<template>
  <!-- ApplicantsList 报名情况 -->
  <page-meta
    :page-style="`overflow: ${pageMetaHidden || activityPerfectInfovisible ? 'hidden' : 'visible'}`"
  />
  <PageContainer>
    <Header v-model="headerHeight" title="报名名单" />
    <view v-if="isPerfectInfo" class="tips" :style="{ top: headerHeight + 'px' }" @click="toPerfectInfo">
      <text class="tip-text">完善资料寻找更多人脉和机会</text>
      <view class="jump">
        <text>完善资料</text>
        <text class="ali-icon icon-you1 fz-16"></text>
      </view>
    </view>
    <view class="applicants-list">
      <Paglist v-model="dataList" :is-init-api="false" loadingDoneText="没有更多公开的报名信息了~" :parame="parame" @register="register">
        <template v-for="v in dataList" :key="v.id">
          <view class="applicants-item" @click="toCard(v)">
            <view class="avatar">
              <Images
                :src="v.avatar"
                width="96rpx"
                height="96rpx"
                borderRadius="50%"
                error-img-type="person"
              />
            </view>
            <view class="info-box">
              <view class="name-box">
                <text class="name text-overflow-1">{{ v.personName }}</text>
                <text v-if="v.memberLevel" class="member-level">
                  {{ v.memberLevelName }}
                </text>
                <text class="tag" v-if="v.isAssociation">同乡</text>
                <text class="tag" v-if="v.isAlumnus">校友</text>
              </view>
              <view class="company-info">
                <text class="company-name text-overflow-1">{{ v.companyName }}</text>
                <text class="company-position">{{ v.companyPosition }}</text>
              </view>
            </view>
          </view>
        </template>
      </Paglist>
      <InfoPopup ref="infoPopupRef" @mask-click="pageMetaHidden = false"></InfoPopup>
    </view>
  </PageContainer>

  <ActivityPerfectInfo v-model:visible="activityPerfectInfovisible" />
  <PerfectInfoDialog />
</template>

<script lang="ts" setup>
  /**  ApplicantsList  报名情况 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { navigateTo, onLoad } from '@/router';
  import { getByRegisterIdAppUserInfo, prticipantsList } from '@/api/activity';
  import type {
    IActivityListResData,
    IPrticipantsListData,
    IPrticipantsListResData,
    RegisterIdAppUserInfo,
  } from '@/api/activity/types';
  import { computed, nextTick, provide, reactive, ref } from 'vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import Images from '@/components/TImage/index.vue';
  import InfoPopup from './components/InfoPopup.vue';
  import { useUserStore } from '@/store/modules/user';
  import { storeToRefs } from 'pinia';
  import PerfectInfoDialog from '@/components/PerfectInfoDialog/index.vue';
  import { onPageScroll } from '@dcloudio/uni-app';
  import ActivityPerfectInfo from '../components/ActivityPerfectInfo.vue';

  const useUser = useUserStore();
  const { userInfo } = storeToRefs(useUser);
  const infoPopupRef = ref<{ open: (data: RegisterIdAppUserInfo) => void } | null>(null);
  const pageMetaHidden = ref(false);
  const headerHeight = ref<number>(87)

  /** 报名人列表 */
  const dataList = ref<IPrticipantsListResData[]>([]);
  const parame = reactive<IPrticipantsListData>({
    current: 1,
    size: 10,
    activityId: 0,
  });

  provide('api', prticipantsList);

  provide('tabIsShow', false);

  const [register, { refresh }] = useConList();

  const displayRegister = ref<IActivityListResData['displayRegister']>();
  onLoad<'ApplicantsList'>((op) => {
    parame.activityId = op.activityId;
    displayRegister.value = op.displayRegister;
    nextTick(() => refresh?.());
  });

  const activityPerfectInfovisible = ref(false);
  const isPerfectInfo = computed(() => {
    const { nativePlace, schoolName, resource, demand } = userInfo.value;
    return [nativePlace, schoolName, resource, demand].filter((v) => v).length < 2;
  });

  async function toPerfectInfo() {
    await useUser.validatePerfectionInfo();

    if (isPerfectInfo.value) {
      uni.showModal({
        title: '人脉匹配提示',
        content: '完善资料寻找更多人脉和机会',
        confirmColor: '#2878FF',
        confirmText: '完善资料',
        cancelColor: '#969799',
        cancelText: '取消',
        success: ({ confirm }) => {
          if (confirm) {
            activityPerfectInfovisible.value = true;
          }
        },
      });
      return Promise.reject('业务资料未完善');
    }
  }

  const queryByRegisterIdAppUserInfo = async (registerId: number) => {
    pageMetaHidden.value = true;
    try {
      const data = await getByRegisterIdAppUserInfo(registerId);
      infoPopupRef.value?.open(data);
    } catch (error) {
      pageMetaHidden.value = false;
    }
  };

  function toCard(v: IPrticipantsListResData) {
    queryByRegisterIdAppUserInfo(v.id);
    // if (v.memberLeadingId) {
    //   navigateTo({ name: 'personCard', options: { id: v.memberLeadingId } });
    // } else {

    // }
  }

  toPerfectInfo();
  onPageScroll(() => {});
</script>

<style lang="scss" scoped>
  .tips {
    background-color: #fff4e7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16rpx;
    padding: 20rpx 32rpx;
    color: #e29942;
    position: sticky;
    z-index: 9;
    .tip-text {
      font-size: 28rpx;
      line-height: 40rpx;
    }
    .jump {
      display: flex;
      align-items: center;
      color: #969799;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 32rpx;
    }
  }
  .applicants-list {
    background: #fff;
    padding: 32rpx 24rpx;
    min-height: 100vh;

    ::v-deep .list-box {
      display: flex;
      flex-direction: column;
      gap: 16rpx;
    }

    .applicants-item {
      display: flex;
      padding: 24rpx 32rpx;
      gap: 24rpx;
      background: #f7f8fa;
      border-radius: 24rpx;
      .info-box {
        display: flex;
        flex-direction: column;
        gap: 16rpx;
        .name-box {
          display: flex;
          gap: 16rpx;
          align-items: center;
          .name {
            color: #333;
            font-size: 32rpx;
            font-weight: 700;
            line-height: 48rpx;
          }
          .member-level {
            padding: 2rpx 12rpx;
            border-radius: 2px;
            border: 0px #ffa944;
            background: linear-gradient(90deg, #fdedc7 0.12%, #f7d9a2 100%);
            color: #ea5e0e;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 32rpx;
          }
          .tag {
            padding: 0px 12rpx;
            border-radius: 4rpx;
            border: 2rpx solid #2878ff;
            color: #2878ff;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 32rpx;
          }
        }
        .company-info {
          display: flex;
          align-items: center;
          gap: 16rpx;
          .company-name {
            color: #333;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 40rpx; /* 142.857% */
          }
          .company-position {
            color: #999996;
            font-size: 24rpx;
            font-weight: 400;
            line-height: 40rpx;
            flex: 1;
            white-space: nowrap;
          }
        }
      }
    }
  }
</style>
